<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<meta http-equiv="Content-Style-Type" content="text/css">
	
	<style type="text/css">
		body
		{
			background-image: url("img/back2.jpg");
			background-position: 50% 0%
		}
		a.button, span.button, del.button{

	display:-moz-inline-box;
	display:inline-block;
	cursor:pointer;
	border:none;
    font-size:0;
    line-height:0;

	background-position:0 0;
	background-repeat:no-repeat;
	height:30px;
	text-decoration:none;
	color:#2e523b;
	font-style:normal;
	margin:0 6px 0px 0;
	padding:0 10px 0 0;
	vertical-align:middle;	

    padding-top:-2px;
	_position:relative;
	_width:10px;
	_overflow-y:hidden;
}
a.button, span.button, del.button,
a.button span, span.button button, span.button input, del.button span{
    background-image:url(img/btn0.png);
    _background-image:url(img/btn0.png);
}
a.button span, span.button button, span.button input, del.button span{
white-space:nowrap;
	cursor:pointer;
    color:#222;
	display:-moz-inline-box;
	display:inline-block;
	line-height:1;
    letter-spacing:0 !important;
    font-family:"Arial" !important;
    font-size:12px !important;
    font-style:normal;
    background-color:transparent;
	background-position:100% 0;
	background-repeat:no-repeat;
	height:30px;
	padding:8px 20px 0 10px;
	margin:0 -16px 0 10px;
	border:none;
	vertical-align:text-top;
	zoom:1;
	_position:relative;
    _padding-left:0px;
	_padding-right:12px;
	_margin-right:-10px;
	_display:block;
	_top:0;
	_right:-5px;

}
span.button button{
   line-height:2.5;/*Opera need this*/
}

html.safari a.button span,
html.safari del.button span{
  line-height:1.3;
}

html.safari span.button button{
  line-height:2.6;
}

html.safari a.button:focus,
html.safari span.button button:focus{
    outline:none;
}
del.button{
	/* cursor:not-allowed;	*/
	background-position:0 -120px;

}
del.button span{
	cursor:default;
    color:#aaa !important;
	background-position:100% -120px;
}
span.button button, span.button input{
	padding-top:0px;
	line-height:2.5;/*Opera need this*/
}
/** optional **/
/*
a.button:visited{
	color:#aaa;
}
*/
/*Hover Style*/
a.button:hover,
span.button:hover,
a.button:focus,
a.dom-button-focus,
span.button-behavior-hover{
	background-position:0 -60px;
	color:#222;
	text-decoration:none;
}
a.button:hover span,
span.button:hover button,
a.button:focus span,
span.button-behavior-hover button,
span.button-behavior-hover input{
	background-position:100% -60px;
}
a.button:active, a.button:focus span{
	color:#444;
}
del.button-behavior-hover, del.button:hover{
	background-position:0 -180px;
	/* cursor:not-allowed; */
}
del.button-behavior-hover span, del.button:hover span{
	background-position:100% -180px;
	/* cursor:not-allowed; */
}
/*Optional hack for IE6 to simulate :hover selector*/
span.button button, del.button span, span.button input{
	_behavior:expression(
		(function(el){
			if( typeof( behavior_onMouseEnter) == 'undefined'){
				behavior_onMouseEnter = function(el){
					var dEl = this.parentNode;
					var sClass = dEl.className ;
					dEl.__defaultClassName = sClass ;
					dEl.className = sClass + ' button-behavior-hover';
					this.setCapture();
				};
				behavior_onMouseLeave = function(el) {
					var dEl = this.parentNode;
					dEl.className = dEl.__defaultClassName ;
					dEl.__defaultClassName = undefined;
					this.releaseCapture();
				};
			};
			el.runtimeStyle.behavior = 'none';
			el.onmouseenter = behavior_onMouseEnter;
			el.onmouseleave = behavior_onMouseLeave;
		})(this));		
}
			.olControlEditingToolbar .olControlDrawItemActive {
                background-image: url("maps/theme/default/img/draw_point_on.png");
                background-repeat: no-repeat;
            }
            .olControlEditingToolbar .olControlDrawItemInactive {
                background-image: url("maps/theme/default/img/draw_point_off.png");
                background-repeat: no-repeat;
            }
            .olControlEditingToolbar .olControlModifyItemActive {
                background-image: url("maps/theme/default/img/draw_polygon_on.png");
                background-repeat: no-repeat;
            }
            .olControlEditingToolbar .olControlModifyItemInactive {
                background-image: url("maps/theme/default/img/draw_polygon_off.png");
                background-repeat: no-repeat;
            }
			 .olControlNavToolbar .olControlNavigationItemActive {
  background-image: url("maps/theme/default/img/panning-hand-on.png");
  background-repeat: no-repeat;
}
.olControlNavToolbar .olControlNavigationItemInactive {
  background-image: url("maps/theme/default/img/panning-hand-off.png");
  background-repeat: no-repeat;
}
            .olControlEditingToolbar .olControlDeleteItemActive {
                background-image: url("maps/theme/default/img/delete_on.png");
                background-repeat: no-repeat;
            }
			.olControlEditingToolbar .olControlDeleteItemInactive {
                background-image: url("maps/theme/default/img/delete_off.png");
                background-repeat: no-repeat;
            }
          
			
		
	</style>
	<title>Tracking Service Beta</title>
	<link rel="stylesheet" href="/maps/theme/default/style.css" type="text/css" />
    <link rel="stylesheet" href="/maps/theme/default/google.css" type="text/css" />
	
	<!--<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
	-->
	 <script type="text/javascript" src="maps/lib/OpenLayers.js" /></script>
	  <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
	<script type="text/javascript">
	// Start position for the map (hardcoded here for simplicity,
	// but maybe you want to get from URL params)
	var lat=46.7693577649755
	var lon=23.579935931214
	var zoom=3

	var map;
		OpenLayers.Control.DrawFeatureOpt = OpenLayers.Class(OpenLayers.Control.DrawFeature, {
                handlers: null,
                initialize: function(layer, handler, options) {
                    OpenLayers.Control.DrawFeature.prototype.initialize.apply(this, [layer, handler, options]);
                    // configure the keyboard handler
                    var keyboardOptions = {
                        keydown: this.handleKeypress
                    };
                    this.handlers = {
                        keyboard: new OpenLayers.Handler.Keyboard(this, keyboardOptions)
                    };
                },
                handleKeypress: function(evt) {
                    var code = evt.keyCode;
                    if (this.handler.drawing) {
                        /*
                         * ESCAPE pressed. Remove second last vertix and finalize the drawing
                         */
                        if (code === 27) {
                            var index = this.handler.line.geometry.components.length - 2;
                            this.handler.line.geometry.removeComponent(this.handler.line.geometry.components[index]);
                            this.handler.finalize();
                        }
                        /*
                         * DELETE pressed. Remove third last vertix (actually the last drawn one) 
                         * and redraw the feature
                         */
                        if (code === 46) {
                            var index = this.handler.line.geometry.components.length - 3;        
                            this.handler.line.geometry.removeComponent(this.handler.line.geometry.components[index]);
                            this.handler.drawFeature();
                        }
                    }
                    return true;
                },
                activate: function() {
                    return this.handlers.keyboard.activate() &&
                        OpenLayers.Control.DrawFeature.prototype.activate.apply(this, arguments);
                },
                deactivate: function() {
                    var deactivated = false;
                    // the return from the controls is unimportant in this case
                    if(OpenLayers.Control.DrawFeature.prototype.deactivate.apply(this, arguments)) {
                        this.handlers.keyboard.deactivate();
                        deactivated = true;
                    }
                    return deactivated;
                },
                
                CLASS_NAME: "OpenLayers.Control.DrawFeatureOpt"
            });
	


		function init(){
		
		 map = new OpenLayers.Map('map');
			layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
			map.addLayer(layerMapnik);
            var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
                "http://labs.metacarta.com/wms-c/Basic.py", {'layers':'basic'}); 
            
       
                map.addControl(new OpenLayers.Control.LayerSwitcher(),{display: false});
				
                var wfs = new OpenLayers.Layer.Vector("WFS");
                    
                map.addLayers([wms, wfs]);

                var drawControl = new OpenLayers.Control.DrawFeatureOpt(
                    wfs, 
                    OpenLayers.Handler.Polygon,
                    { 
                        title: "Draw",
                        displayClass: "olControlDraw"
                    }
                );
				 var drawPan = new OpenLayers.Control.Navigation(wfs,{
						 clickout: false,
						toggle: false,
						
                        title: "Navigate",
                        displayClass: "olControlNavigation"}
                   
                );
                
                /*
                 * After adding a feature, select it to modify
                 */
                drawControl.events.register("featureadded", this, function(e) {
                    modifyFeatureControl.selectFeature(e.feature);
                    modifyFeatureControl.selectControl.select(e.feature);
                    modifyFeatureControl.activate();
                    drawControl.deactivate();
                });
                
                var modifyFeatureControl = new OpenLayers.Control.ModifyFeature(wfs, {
                    clickout: false,
                    toggle: false,
                    deleteCodes: [46, 68, 27],
                    title: "Modify",
                    displayClass: "olControlModify"
                });
                
                var deleteFeatureControl = new OpenLayers.Control.SelectFeature(wfs, {
                    clickout: false,
                    toggle: false,
                    title: "Delete",
                    displayClass: "olControlDelete"
                });
                
                deleteFeatureControl.events.register("featurehighlighted", this, function(e) {
                    if (confirm('Are you sure you want to delete this feature?')) {
                        wfs.removeFeatures([e.feature]);
                        deleteFeatureControl.deactivate();
                    } else {
                        deleteFeatureControl.unselect(e.feature);
                    }
                });
                
                var panel = new OpenLayers.Control.Panel({
                    displayClass: 'olControlEditingToolbar'
                });
                
                panel.addControls([drawControl, modifyFeatureControl, deleteFeatureControl,drawPan]);
                
                map.addControls([
                    panel, drawControl, modifyFeatureControl, deleteFeatureControl,drawPan
                ]);
                
                map.setCenter(new OpenLayers.LonLat(-8, 43), 1);
                   
        }   
       
		
	var b = 0;
	function refreshMe(){
		//addUrl();
		setInterval('addUrl();',"1000");	
	}	
	
  
	
	var newl;var new2;
	var stop = 0;
	function stopMe(){
		stop = 1;
	}
	function startMe(){
		stop = 0;
	}
	function addUrl() {
                
        if(stop==0){
        if(b==1)newl.destroy();
        value = 'gpsData.xml';
        var parts = value.split("/");
			yelp2 = new OpenLayers.Icon("maps/img/marker.png", new OpenLayers.Size(20,29));
			var options2 = { 
				'icon': yelp2  // not icon: yelp 
			};
           	//newl = new OpenLayers.Layer.GeoRSS( parts[parts.length-1], '/gpsData.xml');
            newl = new OpenLayers.Layer.GeoRSS( parts[parts.length-1], value,options2);
            b=1;
          
		value = 'offline.xml';
        var parts = value.split("/");
           	yelp = new OpenLayers.Icon("maps/img/marker-blue.png", new OpenLayers.Size(20,29));
			var options = { 
				'icon': yelp  // not icon: yelp 
			};
            new2 = new OpenLayers.Layer.GeoRSS( parts[parts.length-1], value,options);
            
            map.addLayers([newl,new2]);			
			
        }
        
        
    }	

	</script>
 
</head>
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload=<%="init();refreshMe();"%>>
	<center>
		<div style = "width:60%; height:23%;"></div>
		<div style="padding-top:15px;border:5px solid rgb(0, 0, 0);width:50%; height:60%;" id = "map" ></div>
		<!--<input type="submit" onclick="refreshMe(); return false;" value="Load Data"/>-->
		<!--<span class="button"><input type="submit" onclick="stopMe();" value="Stop Tracking"/></span>
		<span class="button"><input type="submit" onclick="startMe();" value="Continue Tracking"/></span>-->
		<span class="button"><button onclick="stopMe();">Stop Tracking</button></span>
		<span class="button"><button onclick="startMe();">Continue Tracking</button></span>
		
    
  
    </div>
		<div style = "padding-top:25px;width:50%;height:5%;">
			<font size=4><b>Powered by:</b></font>
			<a href = "http://www.osgi.org/"><img src="img/osgi_logo.jpg" width = 70 height = 35></a>
			<a href = "http://www.springsource.org/"><img src="img/spring_logo.jpg" width = 70 height = 35></a>
			<a href = "http://www.mortbay.org/jetty/"><img src="img/jetty_logo.jpg" width = 70 height = 35></a>
			<a href = "http://www.mysql.com/"><img src="img/mysql_logo.jpg" width = 70 height = 35></a>
			<a href = "http://openlayers.org/"><img src="img/openlayers_logo.jpg" width = 140 height = 35></a>
			<br><br>
			<font size = 2>Hegedus-Sirbu Andras 2009 - <a href = "http://cs.ubbcluj.ro/">University of Babes-Bolyai, Cluj-Napoca</a></font>
		</div>
	</center>
</body>
</html>